<html>
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>AdminLTE 2 | Dashboard</title>
            <!-- Tell the browser to be responsive to screen width -->
            <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
            <!-- Bootstrap 3.3.7 -->
            <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
            <!-- Font Awesome -->
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
            <!-- Ionicons -->
            <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
            <!-- Theme style -->
            <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.min.css">
            <!-- AdminLTE Skins. Choose a skin from the css/skins
                 folder instead of downloading all of them to reduce the load. -->
            <link rel="stylesheet" href="../plugins/adminLTE/css/skins/skin-yellow.min.css">  
    </head>
    <body class="hold-transition skin-yellow sidebar-mini">    
            <div class="content">
                    <div class="content-wapper">
                            欢迎来到管理界面
                    </div>
                    <div class="content-wapper">
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-Create">
                                新增
                            </button>
                            <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-Update">
                                    修改
                                </button>
                    </div>
                    <div class="content-wapper">
                            <table id="myTable" class="table table-bordered table-hover"> 
                            </table>
                            <div id="pager">

                            </div> 
                    </div>
                    
            </div>

            <!--新增Modal-->
            <div class="modal fade" id="modal-Create" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span></button>
                        <h4 class="modal-title">新增</h4>
                    </div>
                    <div class="modal-body">
                            <form role="form" id="createForm">
                                    <div class="box-body">
                                      <div class="form-group">
                                        <label for="exampleInputEmail1">Email address</label>
                                        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
                                      </div>
                                      <div class="form-group">
                                        <label for="exampleInputPassword1">Password</label>
                                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                                      </div>
                                      <div class="form-group">
                                        <label for="exampleInputFile">File input</label>
                                        <input type="file" id="exampleInputFile">
                      
                                        <p class="help-block">Example block-level help text here.</p>
                                      </div>
                                      <div class="checkbox">
                                        <label>
                                          <input type="checkbox"> Check me out
                                        </label>
                                      </div>
                                    </div> 
                            </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">保存</button>
                    </div>
                    </div> 
                </div> 
            </div>

            <!--更新Modal-->
            <div class="modal fade" id="modal-Update" style="display: none;">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">修改</h4>
                        </div>
                        <div class="modal-body">
                                <form role="form" id="updateForm">
                                </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary">保存</button>
                        </div>
                        </div> 
                    </div> 
                </div>
    </body>
    <!-- jQuery 2.2.0 -->
<script src="../plugins/jQuery/jQuery-2.2.0.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- AdminLTE App -->
<script src="../plugins/adminLTE/js/app.js?v=2"></script>
<!--业务基础服务公共类-->
    <script src="../js/serviceBase.js"></script>
    <script>
        $(function(){
            var tableData=[
                {
                    "name":"adison",
                    "age":28,
                    "city":"重庆",
                },
                {
                    "name":"fucker",
                    "age":283,
                    "city":"北京",
                },
                {
                    "name":"finder",
                    "age":282,
                    "city":"南京",
                },
            ];
            var pagerData={
                total:8,
                size:2,
                index:3,
            };
            var tableColumn=["标识","姓名","年龄","身高","操作"]

            $.createPagerTbody(tableColumn,tableData,pagerData,"#myTable","#pager");
         
            $("body").append('<div id="extrodiv"></div>');
        });
        
    </script>
</html>